<template>
    <div class="container" style="background-color: azure;">
      <div class="row">
        <div class="col-12 text-center">
          <h1>欢迎来到管理员界面</h1>
        </div>
      </div>
      <div class="row">
        <!-- 左边的按钮组 -->
        <div class="col-3_1">
          <button class="btn btn-primary btn-block" @click="goUserList">用户列表</button>
          <button class="btn btn-success btn-block">套餐销量</button>
          <button class="btn btn-info btn-block" @click="goPackageList">套餐列表</button>
        </div>
        <!-- 中间的图片 -->
        <div class="col-6 text-center">
          <img src="../assets/6218_26888597144.jpg" alt="Admin Image" class="img-fluid">
        </div>
        <!-- 右边的按钮组 -->
        <div class="col-3_2">
          <button class="btn btn-warning btn-block" @click="goCsList">客服列表</button>
          <button class="btn btn-danger btn-block" @click="goComplaintList">用户反馈</button>
          <button class="btn btn-secondary btn-block" @click="goBanList">封禁列表</button>
        </div>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    name: 'Admin_BaseButton',

    methods:{
        goCsList(){
            this.$router.push({ name: 'Admin_CS' });
        },
        goUserList(){
            this.$router.push({ name: 'Admin_User' });
        },
        goBanList(){
          this.$router.push({ name: 'Admin_UserBan' });
        },
        goComplaintList(){
          this.$router.push({ name: 'Admin_Complaint' });
        },
        goPackageList(){
          this.$router.push({ name: 'Admin_Package' });
        }
    }
  };
  </script>
  
  <style scoped>
  .container {
    margin-top: 20px;
    height: 1000px;
  }
  
  .row {
    display: flex;
    align-items: center;
    margin-top: 20px;
  }
  
  h1 {
    margin-bottom: 20px;
  }
  
  /* 按钮样式调整 */
  .btn-block {
    margin-bottom: 10px;
    width: 100%;
    padding: 8px 12px; /* 减小按钮的 padding 以使其变小 */
    font-size: 14px; /* 减小字体大小 */
  }
  
  /* 图片样式 */
  .img-fluid {
    max-width: 100%;
    height: auto;
  }
  
  /* 自定义列宽度和顺序 */
  .col-3_1,
  .col-3_2 {
    flex: 0 0 25%;
    background-color: #f0f0f0; /* 淡灰色背景 */
    border: 1px solid #ccc; /* 边框 */
    padding: 15px; /* 内边距 */
  }
  
  .col-6 {
    flex: 0 0 50%;
    order: 2;
    background-color: #f0f0f0; /* 淡灰色背景 */
    border: 1px solid #ccc; /* 边框 */
    padding: 15px; /* 内边距 */
  }
  
  /* 通过order属性调整左右列的顺序 */
  .col-3_1 {
    order: 1;
  }
  
  .col-3_2 {
    order: 3;
  }
  </style>
  